<template>
  <div class="Single">
    <div class="single-sbox">
      <div class="top">
        <div class="h">单单有礼</div>
        <div class="content">1386位家长已 领</div>
      </div>
      <div class="down-box">
        <div class="down">
          <img
            src="https://img2.epetbar.com/common/upload/commonfile/2022/03/18/1656010_522058.jpg@!200w-c"
            alt=""
          />
          <div class="price">￥0.00</div>
        </div>
        <div class="down">
          <img
            src="https://img2.epetbar.com/common/upload/commonfile/2024/03/13/130426_79466.png@!200w-c"
            alt=""
          />
          <div class="price">￥0.00</div>
        </div>
      </div>
    </div>
    <div class="single-sbox">
      <div class="top">
        <div class="h">签到抽奖</div>
        <div class="content">V1奖励更丰富</div>
      </div>
      <div class="down-box2">
        <div class="down">
          <div>第1天</div>
          <img
            src="https://static.epetbar.com/epet_wap_img/sign/sign_coin0.png"
            alt=""
          />
        </div>
        <div class="down">
          <div>第2天</div>
          <img
            src="https://static.epetbar.com/epet_wap_img/sign/sign_coin0.png"
            alt=""
          />
        </div>
        <div class="down">
          <div>第3天</div>
          <img
            src="https://static.epetbar.com/epet_wap_img/sign/sign_coin0.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.Single {
  box-sizing: border-box;
  justify-content: space-evenly;

  display: flex;
  .single-sbox {
    width: 172.71px;
    height: 152.95px;
    background-color: white;
    border-radius: 5px;
    .top {
      width: 172.72px;
      height: 42.39px;
      box-sizing: border-box;
      display: flex;
      .h {
        font-size: 14px;
        font-weight: 500;
        margin-left: 5px;
      }
      .content {
        width: 62px;
        height: 24px;
        font-size: 9px;
        background: #ef8166;
        border-radius: 30px;
        color: #fff;
        margin-left: 5px;
        word-wrap: break-word;
        text-align: center;
      }
    }
    .down-box {
      width: 172px;
      height: 110px;
      padding: 0 10px 10px 0;
      display: flex;
      justify-content: space-around;
      .down {
        width: 71px;
        height: 100px;
        img {
          width: 61px;
          height: 61px;
        }
        .price {
          font-size: 12px;
          color: #333;
          font-weight: 700;
        }
      }
    }
  }
  .down-box2 {
    width: 160px;
    height: 110px;
    display: flex;
    justify-content: space-around;
    background-color: #f7f7f7;
    border-radius: 5px;
    // margin-top: -10px;
    margin: -10px auto;
    .down {
      height: 81px;
      border: 1px solid #ffb315;
      border-radius: 5px;
      box-sizing: content-box;
      padding: 7px;
      margin-top: 7px;
      div {
        font-size: 10px;
      }
      img {
        width: 17px;
        height: 18px;
        margin-top: 10px;
        margin-left: 5px;
      }
    }
  }
}
</style>